<template>
 <section style=" padding:10px 0;" class="contianer">
     <div class="content">
         <div class="header">
           <div class="right">
                <img :src="$axios.defaults.baseURL +data.account.defaultAvatar" alt="">
                <div class="nickname"> {{data.account.nickname}} </div>
                <div class="time">2019-11-19 9:33</div>
           </div>
           <div class="left">{{this.parentLength}}</div>
        </div>
       
        <CommentItem v-if="data.parent" 
        :data="data.parent" 
        :parentLength="parentLength-1" 
        @reply="reply"/>
        <div @mouseover="isShow=true" @mouseout="isShow=false">
            <div id="fooder"><span>{{data.content}}</span>
            </div>
            <div class="btn"> <a href="#huifu" :class="{active:isShow}" @click="reply">回复</a> </div>
        </div>
        
     </div>
 </section>
  
</template>

<script>
import CommentItem from "@/components/post/commentItem"
export default {
    components:{
        CommentItem
    },
    props:{
        data:{
            type:Object,
            default:{},
        }
    },
    data(){
        return {
            isShow:false,//用于回复按钮的显示隐藏
            parentLength: this.getParentLength(1,this.data)
        }
    },
    methods:{
        // 获取评论的层数
        getParentLength(num,obj){
            if(obj.parent){
                // console.log(num)
                return this.getParentLength(num+=1,obj.parent)
            }else{
                // console.log(num);  
                return num
            }
        },
        reply(follow){
            if(follow.id){
                //follow有就代表有子组件
                this.$emit('reply',{id:follow.id,nickname:follow.nickname})
            }else{
                // console.log('没有子组件',1)
                this.$emit('reply',{id:this.data.follow.id,nickname:this.data.account.nickname})
            }
            
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    padding-top: 5px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px dotted #e1e1e1;
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
       .right{
            display: flex;
            font-size: 12px;
            color: #a69999;
            img{
                width: 16px;
                height: 16px;
                object-fit: cover;
            }
            .nickname{
                color: #666666;
                margin: 0 5px;
            }
       }
       .left{
            color: #a69999;
       }
    }
    #fooder{
        color: #333;
       span{
            margin-left: 30px;
            padding: 10px 0;
       }
    }
    .btn{
        width: 100%;
        height: 16px;
        display: flex;
        justify-content: flex-end;
        font-size: 12px;
        color: #1e50a2;
        &:hover{
            text-decoration: underline solid #1e50a2;
        }
        a{
            display: none;
            &.active{
            display: block;
            }
        }
    }
    
}

</style>